$(function(){
	var imageSelection = $('div.image-container img').imgAreaSelect({
		instance : true,
		handles: true,
		parent : $('div.image-container'),
		onSelectEnd: function(image,selection){
			$('input[name=x1]').val(selection.x1);
			$('input[name=y1]').val(selection.y1);
			$('input[name=x2]').val(selection.x2);
			$('input[name=y2]').val(selection.y2);
			$('input[name=width]').val(selection.width);
			$('input[name=height]').val(selection.height);
		}
	});

	$('input[name=x1],input[name=y1],input[name=x2],input[name=y2]').keyup(function(){
		var x1 = Z.parseInt($('input[name=x1]').val()),
		y1 = Z.parseInt($('input[name=y1]').val()),
		x2 = Z.parseInt($('input[name=x2]').val()),
		y2 = Z.parseInt($('input[name=y2]').val());
		imageSelection.setSelection(x1, y1, x2, y2);
		imageSelection.update();
	});

	$('input[name=width_scale],input[name=height_scale]').keyup(function(){
		var widthScale = Z.parseInt($('input[name=width_scale]').val()),
		heightScale = Z.parseInt($('input[name=height_scale]').val()),
		aspectRatio = widthScale + ':' + heightScale;
		imageSelection.setOptions({
			'aspectRatio' : aspectRatio
		});
	});

	$('ul.button a.crop').click(function(){
		var x1 = Z.parseInt($('input[name=x1]').val()),
		y1 = Z.parseInt($('input[name=y1]').val()),
		x2 = Z.parseInt($('input[name=x2]').val()),
		y2 = Z.parseInt($('input[name=y2]').val()),
		id = Z.parseInt($('input[name=id]').val());

		Z.ajax({
			url  : Z.url('/backend/image/crop'),
			data : {
				'x1' : x1,
				'y1' : y1,
				'x2' : x2,
				'y2' : y2,
				'id' : id
			},
			type : 'post',
			success : function(){
				imageSelection.cancelSelection();

				var src = $('div.image-container img').attr('src')+'?token='+(new Date()).valueOf();
				$('div.image-container img').attr('src',src);
			}
		});

		return false;
	});

	$('ul.button a.crop-as').click(function(){
		Z.confirm({
			'content' : '<label for="label">名称 </label> <input name="label" type="text" class="text"/>',
			'confirm' : function(dialog){
				var label = dialog.find('input[name=label]').val(),
				x1 = Z.parseInt($('input[name=x1]').val()),
				y1 = Z.parseInt($('input[name=y1]').val()),
				x2 = Z.parseInt($('input[name=x2]').val()),
				y2 = Z.parseInt($('input[name=y2]').val()),
				id = Z.parseInt($('input[name=id]').val());

				Z.ajax({
					url  : Z.url('/backend/image/crop_as'),
					data : {
						'label' : label,
						'x1' : x1,
						'y1' : y1,
						'x2' : x2,
						'y2' : y2,
						'id' : id
					},
					type : 'post',
					success : function(data){
						window.location.href = Z.url('/backend/image/edit/'+data.id);
					}
				});
			}
		});

		return false;
	});

	$('a.thumbnail').click(function(){
		var sizes = $('input[name=thumbnail_sizes]').val().replace(/( |\,$|^\,)/g,''),
		id = Z.parseInt($('input[name=id]').val());

		if(sizes == ''){
			Z.alert('请填写缩略图尺寸');
			return false;
		}

		if(sizes.length > 255){
			Z.alert('缩略图尺寸长度超过255个字符');
			return false;
		}

		if(!/^(\d+\_\d+,)*\d+\_\d+$/.test(sizes)){
			Z.alert('缩略图尺寸格式不正确');
			return false;
		}

		if(id == 0){
			Z.alert('图片ID为0，有可能该图片已被删除');
			return false;
		}

		Z.ajax({
			url  : Z.url('/backend/image/thumbnail'),
			data : {
				sizes : sizes,
				id : id
			},
			type : 'post'
		});

		return false;
	});

	$('input[name=thumbnail_sizes]').keydown(function(e){
		if(!((e.which >= 48 && e.which <= 57 && !e.shiftKey) || (e.which >= 96 && e.which <= 105) || e.which == 8 || e.which == 188 || (e.which == 109 && e.shiftKey))){
			return false;
		}

		return true;
	});

	$('.crop input.text').keydown(function(e){
		if(!((e.which >= 48 && e.which <= 57 && !e.shiftKey) || (e.which >= 96 && e.which <= 105) || e.which == 8 || e.which == 188)){
			return false;
		}

		return true;
	});

	Z.tab($('ul.tab-button a'), $('div.tab-content'), ['active','']);
});